<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-box-layout4 ddp-history">
  <div class="ddp-data-title">
    {{'msg.bench.ui.query.hist'|translate}}

    <!-- history option -->
    <div class="ddp-ui-history-option">

      <!-- search -->
      <!-- 클릭시 ddp-selected 추가 -->
      <div class="ddp-history-search" [ngClass]="{'ddp-selected' : isSearchText}">
        <a href="javascript:" class="ddp-icon-search" (click)="openSearchArea()"></a>

        <div class="ddp-type-search">
          <input type="text" placeholder="{{'msg.bench.ui.placeholder.search-query-history'|translate}}" [(ngModel)]="searchText" (keyup.esc)="searchText ='';getSearch()" (keyup.Enter)="getSearch()">
          <a href="javascript:" class="ddp-btn-delete" *ngIf="searchText" (click)="searchText ='';getSearch()"></a>
          <a href="javascript:" class="ddp-btn-back" (click)="closeSearchArea()"></a>
        </div>
      </div>
      <a href="javascript:" class="ddp-icon-del" (click)="historyDelete()"></a>
      <a href="javascript:" class="ddp-btn-close2" (click)="historyClose()"></a>
      <!-- //search -->
    </div>
    <!-- //history option -->
  </div>

  <!-- 검색어 -->
  <div class="ddp-data-list-num" *ngIf="completeSearchText === ''">
    {{pageResult.totalElements}} Result(s)
  </div>
  <div class="ddp-data-list-num" *ngIf="completeSearchText !== ''">
    {{pageResult.totalElements}} Result(s) of '{{completeSearchText}}'
  </div>
  <!-- //검색어 -->

  <ul class="ddp-list-history">
    <li *ngFor="let item of histories; let idx = index" (click)="setTableSql(item)">
      <a href="javascript:">
        <div class="ddp-ui-history-data">
          <em class="ddp-icon-status-success" *ngIf="item.queryResultStatus === 'SUCCESS'"></em>
          <em class="ddp-icon-status-fail" *ngIf="item.queryResultStatus === 'FAIL'"></em>

          <em class="ddp-icon-return" *ngIf="item.queryResultStatus === 'SUCCESS'"></em>
          <em class="ddp-icon-view" *ngIf="item.queryResultStatus === 'FAIL'"></em>
        </div>
        <div class="ddp-data-history">
          <div class="ddp-data-edit" title="{{item.query}}"> {{item.query}} </div>
          <div class="ddp-data-time" title="{{item.queryStartTime | mdate:'YYYY-MM-DD HH:mm:ss'}} / {{item.queryTimeTakenFormatted}} / {{item.createdBy.fullName}}">
            {{item.queryStartTime | mdate:'YYYY-MM-DD HH:mm:ss'}} / {{item.queryTimeTakenFormatted}} / {{item.createdBy.fullName}}
          </div>

        </div>
      </a>
    </li>
  </ul>
  <a *ngIf="page.page < pageResult.totalPages" (click)="getQueryHistories()" href="javascript:" class="ddp-btn-more">+ {{'msg.comm.ui.more'|translate}}</a>

</div>
